<template>
  <div>this page  is router/back (2)</div>
  <button type="button" @click="goBack">返回上一页</button>
  <hr>
  <my-refs ref='box' />
  <hr>
  <vue-no-setup-ref ref='box2' />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import MyRefs from '@/components/ref/MyRefs'
import VueNoSetupRef from '@/components/ref/VueNoSetupRef'
import { useRouter } from "vue-router"
const router = useRouter()

const goBack = () => {
  router.back()
}

const box = ref(null)
const box2 = ref(null)

onMounted(() => {
  console.log('about - > box =', box)
  console.log('about(parent) run myref(son) function')
  // const fn = box.refPrint // 不能直接使用
  const boxValue = box.value
  const fn = boxValue.refPrint
  if (fn && typeof fn === 'function') {
    console.log('boxValue=', boxValue)
    console.log('run myref(son) function ...')
    fn()
  } else {
    console.log('myref(son) fn=', fn)
  }

  console.log('~~~~~~~~ box2(parent) call v-s-s-f.refPrint() ~~~~~~~')
  const fn2 = box2.value.refPrint
  fn2 && fn2()
})

</script>